<script setup lang="ts">
import { provide, ref, watch } from 'vue';
import HmButton from './components/HmButton.vue';
import Son from './components/Son.vue';
provide('msg', 'Hello 孙子！！')
interface Person {
  name: string;
  age: number;
}
const list = ref([{
  name: '张三',
  age: 20,
},
{
  name: '王五',
  age: 30,
},
{
  name: '李四',
  age: 40
}])
const Plist = localStorage.getItem('list')
  ? ref<Person[]>(JSON.parse(localStorage.getItem('list') || '[]'))
  :
  ref<Person[]>(list.value)

watch(Plist, (newVal) => {
  localStorage.setItem('list', JSON.stringify(newVal))
}, { deep: true, immediate: true })

const addcounts = () => {
  Plist.value.forEach(item => {
    item.age += 1
  })
}
provide('Onclick', addcounts)
const show = (list: Person[]) => {
  alert(JSON.stringify(list))
}
</script>
<template>
  <Son :list="Plist" v-on:left-button-click="show">
    <h2>这是传过去的样式</h2>
  </Son>
  <HmButton></HmButton>
</template>
<style scoped>
h2 {
  color: rgb(78, 208, 119);
}
</style>